<template>
  <div class="bedridden-care">
    <header class="header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <h1>卧床护理</h1>
      <div class="right-icons">
        <span class="icon">♡</span>
        <span class="icon">⋯</span>
      </div>
    </header>

    <div class="service-banner">
      <img src="" alt="卧床护理" class="banner-image" />
      <div class="service-info">
        <h2>专业卧床患者护理服务</h2>
        <div class="rating">
          <span class="stars">★★★★★</span>
          <span class="rating-count">4.9 (1700+评价)</span>
        </div>
        <div class="tags">
          <span class="tag">专业护士</span>
          <span class="tag">全面护理</span>
          <span class="tag">上门服务</span>
        </div>
      </div>
    </div>

    <div class="service-tabs">
      <div class="tab" :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">服务详情</div>
      <div class="tab" :class="{ active: activeTab === 'review' }" @click="activeTab = 'review'">用户评价</div>
      <div class="tab" :class="{ active: activeTab === 'qa' }" @click="activeTab = 'qa'">常见问题</div>
    </div>

    <div class="tab-content" v-if="activeTab === 'detail'">
      <div class="service-items">
        <div class="service-item" v-for="(item, index) in serviceItems" :key="index" @click="selectServiceItem(item)">
          <div class="item-header">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-price">{{ item.price }}</div>
          </div>
          <div class="item-desc">{{ item.description }}</div>
          <div class="item-features">
            <div class="feature" v-for="(feature, i) in item.features" :key="i">
              <span class="feature-icon">✓</span>
              <span class="feature-text">{{ feature }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="service-process">
        <h3>服务流程</h3>
        <div class="process-steps">
          <div class="step">
            <div class="step-icon">1</div>
            <div class="step-text">预约下单</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">2</div>
            <div class="step-text">护士上门</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">3</div>
            <div class="step-text">专业护理</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">4</div>
            <div class="step-text">评价反馈</div>
          </div>
        </div>
      </div>

      <div class="service-description">
        <h3>服务说明</h3>
        <div class="description-content">
          <p>卧床护理服务由经验丰富的专业护士提供，针对长期卧床患者的特殊需求，提供全面的护理服务，包括以下内容：</p>
          
          <h4>基础生命体征检测</h4>
          <p>测量体温、脉搏、呼吸、血压等基础生命体征，评估患者健康状况，及时发现异常情况。</p>
          
          <h4>皮肤护理</h4>
          <p>检查皮肤完整性，预防和处理压疮，进行局部皮肤清洁、消毒和保护，保持皮肤干燥清洁。</p>
          
          <h4>翻身拍背</h4>
          <p>根据患者情况进行规律翻身，减轻局部压力，预防压疮形成；配合拍背促进肺部分泌物排出，预防肺部感染。</p>
          
          <h4>床上擦浴</h4>
          <p>使用专业护理用品为患者进行床上擦浴，保持皮肤清洁，促进血液循环，提高舒适度。</p>
          
          <h4>口腔护理</h4>
          <p>使用专业口腔护理工具和溶液，清洁口腔，预防口腔感染和溃疡，保持口腔湿润。</p>
          
          <h4>吸痰护理</h4>
          <p>对有痰液潴留且无法自行咳出的患者，使用专业吸痰器进行口腔、鼻腔或气管内吸痰，保持呼吸道通畅。</p>
          
          <h4>管路护理</h4>
          <p>对留置导尿管、胃管、气管切开等管路的患者，进行专业的管路护理，包括固定、清洁、通畅性检查等。</p>
          
          <h4>健康指导</h4>
          <p>向家属提供专业的卧床患者日常护理指导，包括翻身、饮食、排泄、预防并发症等方面的知识和技巧。</p>
        </div>
      </div>

      <div class="service-notice">
        <h3>服务须知</h3>
        <div class="notice-item">
          <h4>服务时长</h4>
          <p>基础服务约60分钟，根据患者情况和选择的服务项目可能有所调整</p>
        </div>
        <div class="notice-item">
          <h4>服务范围</h4>
          <p>全国30+城市核心区域，下单前请先确认服务地址是否在范围内</p>
        </div>
        <div class="notice-item">
          <h4>准备事项</h4>
          <p>1. 保持室内通风整洁</p>
          <p>2. 准备患者病历资料和用药情况</p>
          <p>3. 准备清洁的毛巾、盆具（如需床上擦浴）</p>
          <p>4. 家属需在场配合服务</p>
        </div>
        <div class="notice-item">
          <h4>注意事项</h4>
          <p>1. 如患者有特殊疾病或过敏史，请提前告知</p>
          <p>2. 护士不提供药物治疗和处方服务</p>
          <p>3. 如有特殊护理需求，请在预约时说明</p>
        </div>
      </div>
    </div>

    <div class="tab-content" v-else-if="activeTab === 'review'">
      <div class="reviews">
        <div class="review-summary">
          <div class="rating-large">4.9</div>
          <div class="stars-large">★★★★★</div>
          <div class="review-count">共1700+评价</div>
        </div>
        
        <div class="review-tags">
          <div class="review-tag active">全部</div>
          <div class="review-tag">好评(1650+)</div>
          <div class="review-tag">有图(400+)</div>
          <div class="review-tag">专业(800+)</div>
          <div class="review-tag">细心(750+)</div>
        </div>
        
        <div class="review-list">
          <div class="review-item" v-for="(review, index) in reviews" :key="index">
            <div class="reviewer-info">
              <img :src="review.avatar" alt="用户头像" class="reviewer-avatar" />
              <div class="reviewer-name">{{ review.name }}</div>
              <div class="review-date">{{ review.date }}</div>
            </div>
            <div class="review-stars">★★★★★</div>
            <div class="review-content">{{ review.content }}</div>
            <div class="review-images" v-if="review.images && review.images.length">
              <img v-for="(image, i) in review.images" :key="i" :src="image" alt="评价图片" class="review-image" />
            </div>
            <div class="nurse-reply" v-if="review.reply">
              <div class="reply-title">护士回复：</div>
              <div class="reply-content">{{ review.reply }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" v-else-if="activeTab === 'qa'">
      <div class="qa-list">
        <div class="qa-item" v-for="(qa, index) in qaList" :key="index" @click="toggleQA(index)">
          <div class="question">
            <span class="q-icon">Q</span>
            <span class="q-text">{{ qa.question }}</span>
            <span class="q-arrow" :class="{ 'arrow-down': qa.open }">▼</span>
          </div>
          <div class="answer" v-if="qa.open">
            <span class="a-icon">A</span>
            <span class="a-text">{{ qa.answer }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="booking-bar">
      <div class="price-info">
        <div class="price">¥199</div>
        <div class="price-desc">起/次</div>
      </div>
      <button class="book-button" @click="makeAppointment()">立即预约</button>
    </div>
    
    <!-- 底部占位，防止内容被底部固定栏遮挡 -->
    <div class="bottom-placeholder"></div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['go-back', 'show-appointment']);

const activeTab = ref('detail');

const serviceItems = ref([
  {
    title: '基础卧床护理',
    price: '¥199/次',
    description: '为卧床患者提供基础护理服务，包括翻身拍背、床上擦浴、口腔护理、床单位更换等',
    features: ['60分钟服务', '专业护理技巧', '舒适度评估', '护理指导']
  },
  {
    title: '卧床康复训练',
    price: '¥259/次',
    description: '为卧床患者提供专业的康复训练，包括被动关节活动、肌力训练、坐起训练等',
    features: ['60分钟服务', '个性化训练方案', '康复进度评估', '家属培训']
  },
  {
    title: '压疮预防与护理',
    price: '¥299/次',
    description: '专业评估压疮风险，制定预防方案，对已形成的压疮进行专业护理和处理',
    features: ['60分钟服务', '压疮风险评估', '专业护理技术', '预防指导']
  },
  {
    title: '长期卧床护理套餐',
    price: '¥2999/月',
    description: '为长期卧床患者提供每周3次的综合护理服务，包含基础护理、康复训练和压疮预防',
    features: ['每周3次', '综合护理方案', '进度跟踪记录', '家属培训']
  }
]);

const reviews = ref([
  {
    name: '刘**',
    avatar: '',
    date: '2023-03-25',
    content: '父亲中风后长期卧床，预约了长期卧床护理套餐。护士非常专业，不仅照顾得很周到，还教会了我们很多护理技巧。最重要的是，在护士的帮助下，父亲没有出现压疮，身体状况也在慢慢改善。',
    images: [],
    reply: '感谢您的信任，我们会继续为您父亲提供专业的护理服务！'
  },
  {
    name: '张**',
    avatar: '',
    date: '2023-03-20',
    content: '母亲骨折卧床，护士上门提供护理和康复训练，非常专业耐心。在护士的帮助下，母亲恢复得比预期要快，现在已经可以在辅助下短时间坐起来了。',
    images: [],
    reply: ''
  }
]);

const qaList = ref([
  {
    question: '卧床患者需要多久翻身一次？',
    answer: '一般建议每2小时翻身一次，但具体频率应根据患者的皮肤状况、体重、营养状态等因素个性化调整。对于高危患者，可能需要更频繁的翻身。我们的护士会根据患者情况制定合适的翻身计划，并教会家属正确的翻身技巧。',
    open: false
  },
  {
    question: '如何预防卧床患者压疮？',
    answer: '预防压疮的关键措施包括：定时翻身（一般每2小时）、使用减压床垫、保持皮肤清洁干燥、保持床单平整无皱褶、注意营养补充（特别是蛋白质和维生素C）、避免皮肤摩擦和剪切力。我们的护士会进行专业的压疮风险评估，并制定个性化的预防方案。',
    open: false
  },
  {
    question: '卧床患者的口腔护理有什么特殊要求？',
    answer: '卧床患者容易出现口腔问题，建议每日至少进行2次口腔护理。使用专业的口腔护理工具（如海绵刷或纱布），配合生理盐水或专用漱口液清洁口腔。注意清洁顺序和力度，避免引起不适或损伤。对于意识不清的患者，需要特别注意预防误吸。我们的护士会示范正确的口腔护理方法，并指导家属掌握技巧。',
    open: false
  }
]);

const goBack = () => {
  emit('go-back');
};

const selectServiceItem = (item) => {
  console.log('选择服务项目:', item.title);
  makeAppointment(item.title, parseInt(item.price.replace(/[^\d]/g, '')));
};

const toggleQA = (index) => {
  qaList.value[index].open = !qaList.value[index].open;
};

const makeAppointment = (serviceName, price) => {
  emit('show-appointment', {
    serviceName: serviceName || '卧床护理服务',
    price: price || 199,
    source: 'bedridden-care'
  });
};
</script>

<style scoped>
.bedridden-care {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 0;
  overflow-x: hidden;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #00a163;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.back-button {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.header h1 {
  font-size: 18px;
  margin: 0;
}

.right-icons {
  display: flex;
  gap: 15px;
}

.icon {
  font-size: 20px;
  cursor: pointer;
}

.service-banner {
  background-color: white;
  padding: 15px;
}

.banner-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.service-info h2 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stars {
  color: #ff9500;
  margin-right: 5px;
}

.rating-count {
  font-size: 14px;
  color: #666;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #f0f9f6;
  color: #00a163;
  border-radius: 4px;
  font-size: 12px;
}

.service-tabs {
  display: flex;
  background-color: white;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 50px;
  z-index: 99;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #00a163;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #00a163;
  border-radius: 3px;
}

.tab-content {
  background-color: white;
  padding: 15px;
}

.service-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
}

.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
}

.item-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.item-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.item-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.feature-icon {
  color: #00a163;
  margin-right: 4px;
}

.service-process {
  margin-top: 20px;
}

.service-process h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.process-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #00a163;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.step-text {
  font-size: 12px;
}

.step-arrow {
  color: #00a163;
}

.service-description {
  margin-top: 20px;
}

.service-description h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.description-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.description-content h4 {
  font-size: 15px;
  margin: 15px 0 5px 0;
}

.description-content p {
  margin: 0 0 10px 0;
}

.service-notice {
  margin-top: 20px;
}

.service-notice h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.notice-item {
  margin-bottom: 15px;
}

.notice-item h4 {
  font-size: 15px;
  margin: 0 0 5px 0;
}

.notice-item p {
  font-size: 14px;
  color: #666;
  margin: 0 0 5px 0;
}

.reviews {
  padding-bottom: 20px;
}

.review-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.rating-large {
  font-size: 36px;
  font-weight: bold;
  color: #ff9500;
}

.stars-large {
  font-size: 24px;
  color: #ff9500;
  margin: 5px 0;
}

.review-count {
  font-size: 14px;
  color: #666;
}

.review-tags {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.review-tag {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
}

.review-tag.active {
  background-color: #e6f7f1;
  color: #00a163;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-item {
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.reviewer-name {
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-stars {
  font-size: 14px;
  color: #ff9500;
  margin-bottom: 10px;
}

.review-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.nurse-reply {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
}

.reply-title {
  color: #00a163;
  margin-bottom: 5px;
}

.reply-content {
  font-size: 14px;
  color: #666;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.qa-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.question {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.q-icon {
  width: 20px;
  height: 20px;
  background-color: #00a163;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.q-text {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
}

.q-arrow {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s;
}

.arrow-down {
  transform: rotate(180deg);
}

.answer {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  padding-left: 30px;
}

.a-icon {
  width: 20px;
  height: 20px;
  background-color: #ff9500;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.a-text {
  flex: 1;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: white;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  max-width: 750px;
  margin: 0 auto;
  z-index: 99;
  width: 100%;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: bold;
}

.price-desc {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.book-button {
  padding: 10px 30px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.bottom-placeholder {
  height: 120px;
  width: 100%;
}
</style> 